<template>
    <div :class="isPc ? 'home-foot-pc' : 'home-foot'" v-if="show">
        <div class="left"></div>
        <div class="right">
            <div class="btn" @click="showEwm = true">
                <img class="icon" src="https://static.inclusionconf.com/static/images/sign-bottom-mask-ewm-small.png" alt="">
                {{ En ? '‌Audience Registration‌' : '观众注册' }}
            </div>
        </div>
        <div class="home-foot-mask" v-show="showEwm">
            <div class="home-foot-mask1">{{ En ? '观众参会通道' : '观众参会通道' }}</div>
            <div class="home-foot-mask2" v-html="En ? '请使用手机扫码<br>即刻参会' : '请使用手机扫码<br>即刻参会'"></div>
            <div class="home-foot-mask3" v-html="En ? '如已注册，<br>请打开手机扫码查看参会凭证' : '如已注册，<br>请打开手机扫码查看参会凭证'"></div>
            <img class="home-foot-mask4" src="https://static.inclusionconf.com/static/images/sign-bottom-mask-ewm-t1.png" alt="">
            <img class="home-foot-mask5" @click="close" src="https://static.inclusionconf.com/static/images/sign-bottom-mask-close.png" alt="">
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            show: true,
            showEwm: true
        }
    },
    methods: {
        close() {
            this.showEwm = false
            setTimeout(() => {
                this.showEwm = true
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
    .home-foot-pc {
        position: fixed;
        right: 0;
        bottom: 0;
        height: 100px;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        z-index: 100;

        .left {
            font-family: AlibabaPuHuiTi_3_85_Bold;
            font-size: 20px;
            color: #000;
            line-height: 20px;
            font-style: normal;
            padding-left: 40px;
        }

        .right {
            display: flex;
            align-items: center;
            height: 100%;
            padding-right: 24px;
            pointer-events: auto;

            .btn {
                height: 42px;
                background: #fff;
                padding: 0 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_85_Bold;
                font-size: 22px;
                color: #000032;
                line-height: 30px;
                text-align: right;
                font-style: normal;
                cursor: pointer;
                text-decoration: none;
                border-radius: 4px;

                .icon {
                    width: 28px;
                    height: 28px;
                    transition: 0.3s;
                }
            }

            .close {
                width: 24px;
                margin-left: 32px;
                cursor: pointer;
            }
        }

        .home-foot-mask {
            width: 620px;
            height: 425px;
            background: url(https://static.inclusionconf.com/static/images/sign-bottom-mask-t1.png);
            background-size: 100% 100%;
            position: absolute;
            right: 20px;
            bottom: 98px;
            padding-left: 35px;
            display: none;

            .home-foot-mask1 {
                padding: 32px 0 20px;
                width: 556px;
                position: relative;
                font-size: 32px;
                line-height: 32px;
                font-family: inClusionFont;
                color: #1E234B;
                border-bottom: 1px solid rgba(132, 87, 255, 0.19);
            }

            .home-foot-mask2 {
                font-family: inClusionFont;
                font-size: 28px;
                font-weight: normal;
                line-height: 40px;
                color: #1E234B;
                padding-top: 36px;

            }

            .home-foot-mask3 {
                margin-top: 40px;
                font-family: AlibabaPuHuiTi_2_65_Medium;
                font-size: 18px;
                font-weight: 300;
                line-height: 28px;
                color: #1E234B;

            }

            .home-foot-mask4 {
                position: absolute;
                right: 36px;
                top: 126px;
                width: 215px;
                height: 215px;
            }

            .home-foot-mask5 {
                position: absolute;
                right: 24px;
                top: 30px;
                width: 24px;
                height: 24px;
                cursor: pointer;
                pointer-events: auto;
            }
        }

        &:hover {

            .home-foot-mask {
                display: block;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .home-foot {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 30px;
        padding-bottom: 16px;
        background: linear-gradient(to right, #1739D6 0%, #7F51D2 100%), #FFFFFF;
        box-shadow: 0px 5px 15px 0px rgba(127, 81, 210, 0.18);
        border-radius: 3px;
        z-index: 11;

        .left {
            font-family: AlibabaPuHuiTi_3_85_Bold;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 24px;
            font-style: normal;
            text-align: center;
            padding: 31px 16px 0;
        }

        .right {
            display: flex;
            justify-content: center;
            margin-top: 20px;

            .btn {
                height: 39px;
                background: #FFFFFF;
                border-radius: 20px;
                padding: 0 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_85_Bold;
                font-size: 16px;
                color: #7F51D2;
                line-height: 30px;
                text-align: right;
                font-style: normal;
                cursor: pointer;
                text-decoration: none;

                .icon {
                    margin-left: 8px;
                    width: 16px;
                    height: 16px;
                    transition: 0.3s;
                }

                &:hover {
                    content: "";

                    .icon {
                        transform: translateX(4px);
                    }
                }
            }

            .close {
                width: 16px;
                margin-left: 32px;
                cursor: pointer;
                position: absolute;
                padding: 6px;
                box-sizing: content-box;
                right: 0;
                top: 5px;
            }
        }
    }
}
</style>